<template>
	<view id="goodsInfo">
		<!-- 问题：返回页面 -->
		<u-navbar :placeholder="true" :title="goodInfo.name" :autoBack="true"></u-navbar>

		<!-- 商品轮播 -->
		<view class="goodsSwaiper">
			<u-swiper height="300" :list="goodInfo.imgs"></u-swiper>
		</view>

		<!-- 商品描述 -->
		<view class="goodsInfoDiv">
			<u-row>
				<u-col span="3">
					<view class="inlineTag">
						<text class="rmbTitle">¥</text>
						<text class="rmbnumber">{{ goodInfo.price }}</text>
					</view>
				</u-col>
				<u-col span="9">
					<u-row>
						<view class="inlineTag">
							<u-tag text="直降" type="error"></u-tag>
						</view>
						<view class="inlineTag">
							<u-tag text="¥562" type="error" plain></u-tag>
						</view>
					</u-row>
				</u-col>
			</u-row>
			<u-row justify="space-between">
				<u-col span="7">
					<u-row>
						<u-col span="5">
							<u--text color="gray" text="宝贝原价："></u--text>
						</u-col>
						<u-col span="7">
							<u--text color="gray" mode="price" decoration="line-through" text="12511"></u--text>
						</u-col>
					</u-row>
				</u-col>
				<u-col span="3">
					<u--text color="gray" text="121321加购"></u--text>
				</u-col>
			</u-row>
			<u--text lines="2" size="22" lineHeight="45" :bold="true" :text="goodInfo.name"></u--text>

			<!-- 商品标签 -->
			<view class="goodsTags">
				<view class="inlineTag2" v-for="(item,index) in goodInfo.tags">
					<u-tag :text="item" type="warning" plain></u-tag>
				</view>
			</view>
		</view>

		<u-gap height="10" bgColor="#F6F6F6"></u-gap>
		<!-- 个人信息模块 -->
		<view>
			<u-row style="padding: 40upx 0;">
				<u-col :span="2">
					<view style="display: flex;justify-content: center;align-items: center;">
						<u-avatar :src="goodInfo.photo"></u-avatar>
					</view>
				</u-col>
				<u-col :span="7">
					<u--text size="18" :text="goodInfo.userName" :bold="true"></u--text>
					<u--text siz="1" color="gray" :text="'共发布'+goodInfo.postGoodsCount+'个产品'"></u--text>
				</u-col>
				<u-col :span="2">
					<view style="display: flex;justify-content: center;align-items: center;">
						<u-tag style="width: 80px;" text="关注" icon="tags-fill" type="warning"  shape="circle"></u-tag>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<u-gap height="10" bgColor="#F6F6F6"></u-gap>
		
		<!-- 商品详情 -->
		<view style="padding: 10upx 0upx 10upx 20upx;">
			<u--text size="18" text="商品详情" :bold="true"></u--text>
		</view>
		<!-- 富文本框 -->
		<view style="box-sizing: border-box;padding-left: 20upx;padding-right: 20upx;" v-html="goodInfo.htmls">
			
		</view>
		
		<!-- 使用固定定位完成一个永远固定在页面底部的够买菜单栏 -->
		<view class="footDiv">
			<u-row>
				<u-col :span="5">
					 <u-grid :border="false" col="2">
						 <u-grid-item>
							 <u-icon name="star" label="收藏" labelPos="bottom" size="30"></u-icon>
						 </u-grid-item>
						 <u-grid-item>
							 <u-icon name="shopping-cart" label="购物车" labelPos="bottom" size="30"></u-icon>
						 </u-grid-item>
					 </u-grid>
				</u-col>
				<u-col :span="6">
					<u-row>
						<u-col :span="6">
							<u-button type="warning" text="加入购物车"></u-button>
						</u-col>
						<u-col :span="6">
							<u-button type="error" text="立即够买"></u-button>
						</u-col>
					</u-row>
				</u-col>
			</u-row>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'goodsInfo',
		data() {
			return {
				goodInfo: {
					name: "99元小小牛牛",
					price: 8818,
					photo:"https://cdn.uviewui.com/uview/swiper/swiper1.png",
					userName:"大王叫我来巡山",
					postGoodsCount:86,
					tags: [
						"快速发货",
						"包邮到家",
						"八成新"
					],
					imgs: [
						'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					],
					htmls:'<h1>nihao</h1><h1>nihao</h1><h1>nihao</h1><h1>nihao</h1><h1>nihao</h1><h1>nihao</h1><h1>nihao</h1><h1>nihao</h1><h1>nihao</h1>'
				}
			}
		},
		methods: {
			// 返回上一个界面
			toBack() {
				console.dir("!!!!");
			}
		}
	}
</script>

<style scoped>
	.inlineTag {
		float: left;
		width: 100upx;
		height: auto;
	}

	.goodsTags {
		width: 100vw;
		height: auto;
	}

	.inlineTag2 {
		float: left;
		width: 150upx;
		height: auto;
		margin-left: 20upx;
	}

	.rmbTitle {
		color: #FE3D3E;
		font-size: 1.5em;
	}

	.rmbnumber {
		color: #FE3D3E;
		font-size: 2em;

	}

	.goodsInfoDiv {
		box-sizing: border-box;
		padding: 10upx 15upx;
		width: 100vw;
		height: 300upx;
	}
	.footDiv{
		width: 100vw;
		height: 110upx;
		position: fixed;
		bottom: 0upx;
		background-color: #FFFFFF;
		border-top: 1px solid #ececec;
	}
</style>